<template>
	<view class="lh-container">
		<view class="top_image">
			<image :src="imagePath + 'tcq.png'" style="width: 750rpx" mode="widthFix"></image>
		</view>
		<view class="" style="margin-bottom: 30rpx">
			<left style="margin-top: 10rpx" />
		</view>
		<view class="form-container">
			<uni-forms class="forms-item" ref="accountForm" :model="formData">
				<view class="login-btn" style="text-align: center" v-if="userInfo.info.mobile">
					<image :src="imagePath + 'btn.png'" mode="widthFix" style="width: 600rpx" @click="submitform">
					</image>
				</view>
				<view class="login-btn-auth" v-else>
					<!-- 支付宝 授权过后 直接下单操作 做成一个异步操作 -->
					<button class="sub-btn" open-type="getAuthorize" scope="phoneNumber"
						@getAuthorize="getPhoneNumberConfirm" @error="handleAuthError">
						<image :src="imagePath + 'btn.png'" mode="widthFix" style="width: 600rpx"></image>
					</button>
				</view>
				<view
					style="margin-top: 20rpx; margin-bottom: 0rpx; padding-bottom: 0rpx; display: flex; justify-content: center; align-items: center; font-size: 24rpx">
					<checkbox-group @change="changeAll">
						<checkbox value="cb" :checked="allChecked" color="#3c4aa5"
							style="transform: scale(0.7)" />
					</checkbox-group>
					<text style="color: #ffffff">已阅读并同意</text>
					<text style="color: #f8ffa9" @click="privatePro(1)">《个人信息授权及保护声明》</text>
					<text style="color: #f8ffa9" @click="privatePro(2524)">《产品说明》</text>
				</view>
			</uni-forms>
		</view>
		<view class="bottom">
			<view class="">业务资费：首周免费，续订30元/月（随时取消）</view>
			<view class="">续订权益：学王课堂会员月卡，30元支付宝立减金</view>
			<view class="">客服热线：400-8825-101</view>
		</view>

		<uni-popup ref="popupOk" type="bottom" border-radius="10px 10px 0 0">
			<per-info :agreementType="agreeType" @ok="ok1"></per-info>
		</uni-popup>

		<view class="fixed-1" @click="privatePro(2524)">
			<image :src="imagePath + 'rule.png'" style="width: 45rpx" mode="widthFix"></image>
		</view>
		<view class="fixed-2" @click="goLink">
			<image :src="imagePath + 'link.png'" style="width: 45rpx" mode="widthFix"></image>
		</view>
		<view class="fixed-4" @click="phone">
			<image :src="imagePath + 'tel.png'" style="width: 45rpx" mode="widthFix"></image>
		</view>
		
		<confim v-if="isShowAgreementConfirm" @ok="agreementConfirmOkHandler" @cancel="isShowAgreementConfirm = false"
			@showAgreement="showAgreementHandler"></confim>
		<!-- 成功展示页面 -->
		<uni-popup ref="successRef" type="bottom" background-color="#fff" border-radius="10px 10px 10rpx 10rpx">
			<jxwSuccessShop :mobile="userInfo.mobile" @btnOk="JxwSuccessShopClose"></jxwSuccessShop>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		watchEffect,
		watch
	} from 'vue';
	import {
		onLoad,
		onPageScroll,
		onReady
	} from '@dcloudio/uni-app';
	import {
		storeToRefs
	} from 'pinia';
	import initApi from '@/apis/init.js';
	import paramApi from '@/apis/paramApi.js';
	import perInfoVue from '../../components/per-info/per-info.vue';
	import {
		constStore
	} from '@/store/const.js';
	import {
		useUserStore
	} from '@/store/user.js';
	import {
		getALPhoneNumber,
		getWXphoneNumber,
		uuIds,
		getPhoneNumber,
		handleAuthError
	} from '@/utils/login.js';
	import {
		getProductNum
	} from '@/utils/commo.js';
	const uuIdsInit = uuIds();
	const {
		userInfo
	} = storeToRefs(useUserStore());
	const imagePath = ref('https://web.78keji.cn/v2img/jxw/');
	const {
		constInfo
	} = constStore();
	const accountForm = ref();
	// 表单数据
	const isShowAgreementConfirm = ref(false);
	const allChecked = ref(false);
	const popupOk = ref();
	const successRef = ref();
	const agree = ref('同意');
	const agreeType = ref(1);
	const formData = reactive({
		mobile: '',
		smsCode: null,
		orderNo: null,
		channelCode: '',
		productCode: ''
	});
	const dialogRef = () => {
		successRef.value.open('center');
	}
	const JxwSuccessShopClose = () => {
		successRef.value.close();
	}
	const changeAll = (val) => {
		if (val.detail.value.length > 0) {
			allChecked.value = true;
		} else {
			allChecked.value = false;
		}
	};
	const phone = () => {
		uni.makePhoneCall({
			phoneNumber: '400-8825101' //客服
		});
	};
	const goLink = () => {
		// console.log('去哪里');
		uni.navigateTo({
			url: `/pages/my/orderList`
		});
	};
	watch(
		() => formData.mobile,
		(newVal, oldValue) => {
			const isOkMobile = /^1[3-9][0-9]\d{8}$/.test(newVal);
			if (isOkMobile) {
				uni.hideKeyboard();
			}
		}
	);
	const agreementConfirmOkHandler = () => {
		allChecked.value = true;
		submitform();
	};
	// 获取手机号 并下单
	const getPhoneNumberConfirm = async () => {
		const res = await getPhoneNumber();
		console.log(res, 'getPhoneNumberConfirm');
		if (res.code == 20000) {
			submitform();
		}
	};
	/* 发送订单 */
	const submitform = async () => {
		if (!paramApi.getP()) {
			uni.setStorageSync('p', 'LH2524');
		}
		if (!paramApi.gets()) {
			uni.setStorageSync('s', '233138');
		}
		console.log(userInfo.value);
		try {
			if (!allChecked.value) return (isShowAgreementConfirm.value = true);
			if (!userInfo.value.info.mobile) return uni.utils.toast('请输入手机号');

			const arr = {
				productCode: 'LH2524',
				channelCode: paramApi.getA(),
				mobile: userInfo.value.info.mobile,
				orderType: 3,
				paymentMethod: 1,
				
				param: paramApi.getParam(),
				uuid: uuIdsInit,
				environmentCode: '4',
				scenarioCode: '5'
			};

			initApi.associateMemberSign(arr).then((res) => {
				console.log(res, 'uuiduuid');
				if (res.code == 20000) {
					// 这个地方 怎么感觉不对 如果是在 andriod 微信浏览器 浏览器 支付宝浏览器 ios 也是一样的
					handleJumpPaySign(res.data);
				} else {
					uni.utils.toast(res.message);
				}
			});

		
		} catch (e) {
			//TODO handle the exception
			console.log(e);

			return uni.utils.toast('订单订购失败');
		}
	};
	const handleJumpPaySign = (query) => {
		console.log(query, '支付宝 拉起签约进入apply--->>>');

		my.ap.openURL({
			url: 'https://openapi.alipay.com/gateway.do?' + query.extInfo?.alipaySignUrl, // 请将 url 替换为有效的页面地址
			success: (res) => {
				console.log('openURL success', res);
			},
			fail: (err) => {
				console.log('openURL success', err);
			}
		});
		// 自己的产品调用

	};
	onLoad((query) => {
		paramApi.initData(query);
		// 支付宝 默认授权登录
		// #ifdef MP-ALIPAY
		// getPhoneNumber();
		// #endif
		setTimeout(() => {
			getProductNum(paramApi.getA(), 'LH2524', uuIdsInit);
		}, 100);
	});
	onMounted(() => {});
	/* 统计 */

	const ok1 = () => {
		popupOk.value.close();
		allChecked.value = true;
	};
	const showAgreementHandler = (value) => {
		console.log(value);
		agreeType.value = value;
		popupOk.value.open('center');
	};
	const privatePro = (type) => {
		console.log(type);
		agreeType.value = type;
		popupOk.value.open('center');
	};
</script>

<style lang="scss" scoped>
	.form-container {
		width: 750rpx;
		margin: 0 auto;
		// background-color: #3d4ca6;
		background: linear-gradient(to right, #3d4ca6, #2e3a8b);
		overflow: hidden;
		box-sizing: border-box;

		.forms-item {
			width: 600rpx;
			margin: 0 auto;
		}

		.login-btn {
			animation: scaleUp 2.5s infinite;
			/* 动画名称、持续时间、是否无限循环 */
		}

		@keyframes scaleUp {

			0%,
			50% {
				transform: scale(1);
				/* 开始时的缩放比例 */
			}

			25%,
			75% {
				transform: scale(1.05);
				/* 缩放比例最大值 */
			}

			100% {
				transform: scale(1);
				/* 结束时的缩放比例 */
			}
		}

		.uni-forms-item {
			height: 100rpx;
			margin-bottom: 20 !important;
			border-bottom: 2rpx solid #eee;

			/* #ifndef MP-ALIPAY */
			background-color: #ffffff;
			/* #endif */
			border-radius: 100rpx !important;
			box-sizing: border-box;

			.uni-input-input {
				width: 600rpx;
				/* #ifdef MP-ALIPAY */
				height: 100rpx;
				margin-left: 75rpx;
				text-align: center;
				font-size: 34rpx;
				/* #endif */

				/* #ifndef MP-ALIPAY */
				margin-left: 50rpx !important;
				/* #endif */
				font-size: 34rpx;
			}
		}
	}

	.lh-container {
		width: 750rpx;
		margin: 0 auto;
		// background-color: #3d4ca6;
		background: linear-gradient(to right, #3d4ca6, #2e3a8b);
		overflow: hidden;
		box-sizing: border-box;
		position: relative;
		min-height: 100vh;
	}

	:deep(.uni-checkbox-input) {
		border-radius: 80rpx !important;
	}

	.fixed-phone {
		position: absolute;
		top: 300rpx;
		right: 0rpx;
	}

	.fixed-active {
		position: absolute;
		top: 150rpx;
		right: 0rpx;
	}

	.fixed-link {
		position: absolute;
		top: 450rpx;
		right: 0rpx;
	}

	.arrive-btn {
		position: fixed;
		bottom: 20rpx;
		width: 750rpx;
		text-align: center;
	}

	.sub-btn {
		background: none;
		padding: 0;
		margin: 0;
		border: none;
		animation: scaleUp 2.5s infinite;
		box-shadow: none;
		border-style: none;
		margin-top: 45rpx;
		min-height: 160rpx;

		border::after {
			background: none;
			padding: 0;
			margin: 0;
			border: none;
			content: none;
			border-style: none;
		}
	}

	.bottom {
		margin-top: 20rpx;
		text-align: center;
		font-size: 20rpx;
		color: #ffffff;
	}
</style>